<template>
  <!-- 上传 -->
  <div>
    <div class="uploadDiv" id="uploadDiv">
      <div class="title_div">
        <span><b style="color: red">*</b>其他证明附件</span>
        <el-upload
          class="upload-demo"
          action="http://drxf-oss.oss-cn-chengdu.aliyuncs.com"
          :data="formData"
          :file-list="fileList"
          :on-success="successOther"
          :on-error="errorOther"
          :before-upload="beforeUpload"
          multiple
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
        >
          <el-button size="small" class="addpic" @click="getOss"
            >上传</el-button
          >
        </el-upload>
      </div>
      <div
        class="upload_list listCart"
        v-loading="loading"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <ul class="clearfix">
          <li v-for="(item, index) in FileList" :key="item.id">
            <div class="img">
              <el-image
                style="width: 160px; height: 90px"
                :src="item.src"
                fit="fill"
                :lazy="true"
              >
              </el-image>
            </div>
            <p class="name">{{ item.accessoryName }}</p>
            <p class="ztc">{{ item.accessorySize }} MB</p>
            <p class="ztc">
              {{ item.updateTime }}由{{ item.upEmployeeName }}上传
            </p>
            <div class="btn">
              <el-button type="text" @click="reviewPic(item.url)"
                >查看</el-button
              >
              <span>
                <el-popconfirm
                  title="确定删除此数据吗？"
                  @onConfirm="deleteData(item.id, index, fileList, FileList)"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    size="small"
                    class="deteBtnText"
                    >删除</el-button
                  >
                </el-popconfirm>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {
  //   getOrderNumber,
  //   delPic,
  //   getProductUrl,
  postCustomer,
} from "../../../src/assets/js/api";
// import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "OtherUpload",
  props: {
    isNew: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      formData: {},
      fileList: [],
      loading: false,
      FileList: [],
      timeStamp:""
    };
  },
  created() {},
  methods: {
    getOss() {
      postCustomer().then((res) => {
        let dataOss = res.data;
        this.formData.key = dataOss.dir + dataOss.fileName + ".png";
        this.formData.OSSAccessKeyId = dataOss.accessid;
        this.formData.policy = dataOss.policy;
        this.formData.Signature = dataOss.signature;
        this.formData.success_action_status = 200;
      });
    },
    beforeUpload() {
    },
    successOther() {
    },
    errorOther() {
      this.timeStamp = `${new Date() - 0}.png`;
    },
  },
};
</script>

<style scoped>
::v-deep .el-upload-list {
  width: 100%;
  display: none;
}
.title_div {
  height: 56px;
  border-bottom: 1px solid #ededed;
  text-align: left;
  line-height: 56px;
}
.title_div span {
  height: 15px;
  font-size: 15px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.upload-demo {
  float: right;
  display: inline-block;
}
.addpic {
  color: #fff !important;
  background: #ffa32f !important;
  border: 1px solid #ffa32f !important;
}
.addpic:hover {
  background: #ffa32f;
  border: 1px solid #ffa32f;
  color: #fff;
}
.uploadDiv {
  margin-top: 10px;
  overflow: hidden;
}
.upload_list {
  overflow: hidden;
}
.upload_list ul {
  margin-right: -12px;
}
.upload_list li {
  width: 49%;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
  height: 130px;
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  position: relative;
  box-sizing: border-box;
}
.upload_list li:nth-child(even) {
  margin-right: unset;
}
.upload_list .img {
  float: left;
  width: 160px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 20px;
}
.upload_list .btn {
  position: absolute;
  top: 20px;
  right: 20px;
}
.upload_list .name {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 14px;
  margin-top: 5px;
  max-height: 20px;
  overflow: hidden;
  max-width: 66%;
}
.upload_list .ztc {
  color: #999999;
}
</style>
